<template>
  <!--  通话记录-->
  <Table style="margin-bottom: 10px" border :table-data="tableData" :table-column="tableColumn" :page="page"
         max-height="400px"
         @handleSizeChange="handleSizeChange"
         @handleCurrentChange="handleCurrentChange"
         :header-style="{backgroundColor:'#fffbed'}">
    <template slot="phone" slot-scope="{row}">
      <el-popover
          placement="right"
          width="120px"
          trigger="click">
        <SelectCallPhone :phone="row.phone" :modeType="modeType" modeKey="phoneAddressBook" :orderId="routesQuery.orderId"/>
        <el-link slot="reference" :underline="false" type="primary">{{
            row.phone
          }}
        </el-link>
      </el-popover>
    </template>
  </Table>
</template>

<script>
import {callLog} from "@/api/order";

export default {
  props: ['routesQuery'],
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('姓名'), align: 'center', prop: 'name'},
        {label: this.$t('手机号码'), align: 'center', slot: 'phone', prop: 'phone'},
        {label: this.$t('通话时间'), align: 'center', prop: 'callTime'},
        {label: this.$t('通话时长'), align: 'center', prop: 'callDuration'},
        {label: this.$t('通话类型'), align: 'center', prop: 'type'},
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    modeType() {
      return this.routesQuery.modeType || null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userId, orderId} = this.routesQuery
      const res = await callLog({
        userId: parseInt(userId),
        loanRecordId: orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list.map(item => {
          item.type = this.formatType(item.type)
          item.callDuration = item.callDuration + 's'
          return item
        })
        this.page.total = total
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    formatType(value) {
      let str = ''
      switch (value) {
        case 1 :
          str = this.$t('接听')
          break;
        case 2 :
          str = this.$t('呼出')
          break;
        case 3 :
          str = this.$t('未接听')
          break;
        case 4 :
          str = this.$t('语音邮箱')
          break;
        case 5 :
          str = this.$t('拒接')
          break;
        case 6 :
          str = this.$t('自动拦截')
      }
      return str
    }
  }
}
</script>

<style scoped>

</style>
